<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" type="text/css" href="mycss.css">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>电影列表</title>
        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>

        <div>
            <!--输入查询字的文本框-->
            <input type="text" id="key"/>
            <button id="queryGoods" onclick="loadData(0,8)">查询</button>
            <br/>
            <br/>
            <table width="50%" border="1" cellspacing="0">
                <!--表头-->
                <tr height="50">
                    <th>原名</th>
                    <th>别名</th>
                    <th>电影图片</th>
                    <th>电视台</th>
                    <th>首播日期</th>
                </tr>
                <!--数据库数据-->
                <tbody id="bg">
                </tbody>
            </table>

        </div>

        <!--底部信息-->
        <div id="footer">
            <span id="summary"></span>
            <ul id="pagination">
                <li id="01">首页</li>
                <li id="02">上一页</li>
                <li id="03">下一页</li>
                <li id="04">最后一页</li>
            </ul>
            <div id="select">
                <span>跳转到 </span>
                <input type="text" name="page_num">
                <span> 页 </span>
                <input type="button" name="go_btn" value="跳转">
            </div>
        </div>


        <script>
            var start_date = "2017-01-01", end_date = "2017-01-08";
            var pageNo = 1;
            var pageSize = 8;
            var pages = 0;

            function loadData(num, size) {
                $(".detail").remove(); //每次重新从 API 数据接口获取数据都要先清除原先表格 `<tr>` 的内容
                $.ajax({
                    url: "/getMovie?" + "pageNum=" + num + "&pageSize=" + size, //显示数据的处理页面
                    type: "GET",
                    dataType: "JSON", //这里我们用JSON的数据格式
                    success: function (data) {
                        var totalCount = data.total;
                        data = data.records;
                        var str = "";
                        for (var k in data) {
                            "<br>"
                            str += "<tr class=\"detail\" height=\"50\" align=\"center\"><td>"
                                + "<a class=\"B font_14\" href=\"" + data[k].filmUrl + " title=\"" + data[k].movieName + "\" target =\"_self\">" + data[k].movieName + "</a>"
                                + "</td><td>" + data[k].aliasName
                                + "</td><td>" + "<img className=\"list_pic\" src=\"" + data[k].pictureUrl + "\" border=\"0\" alt=\"" + data[k].movieName + "\" width=\"50\" height=\"50\"/>"
                                + "</td><td>" + data[k].tvStation
                                + "</td><td>" + data[k].publishDate
                                + "</td></tr>";
                        }
                        $("#bg").html(str); //将内容放大显示这些数据的地方
                        var mod = totalCount % pageSize;
                        var temp = Math.floor(totalCount / pageSize);
                        if (mod == 0) {
                            pages = temp;
                        } else {
                            pages = temp + 1;
                        }
                        displayFooter(totalCount, pages, pageNo);
                    }
                });
            }

            <!--输入查询字的文本框-->
            function getData() {
                alert("开发中");
            }

            <!--展示底部信息-->
            function displayFooter(totalCount, pages, pageNo) {
                var newText = '共' + totalCount + '条，' + '第' + pageNo + '页，' + '共' + pages + '页';
                $("#summary").text(newText);
            }

            /*调用函数*/
            $("input[name='page_num']").keydown(function (e) {
                if (e.keyCode == 13) {
                    $("input[name='go_btn']").click();
                }
            });

            $("input[name='go_btn']").click(function () {
                var goPage = $("input[name='page_num']").val();
                if (goPage >= 1 && goPage <= pages && goPage != pageNo) {
                    pageNo = goPage;
                    loadData(pageNo, pageSize);
                } else {
                    return false;
                }
            });

            $("#01").click(function () {
                pageNo = 1;
                loadData(pageNo, pageSize);
            });

            $("#02").click(function () {
                if (pageNo == 1) {
                    return false;
                } else {
                    pageNo--;
                    loadData(pageNo, pageSize);
                }
            });

            $("#03").click(function () {
                if (pageNo == pages) {
                    return false;
                } else {
                    pageNo++;
                    loadData(pageNo, pageSize);
                }
            });

            $("#04").click(function () {
                pageNo = pages;
                loadData(pageNo, pageSize);
            });

        </script>
    </body>
</html>